<template>
  <div class="home">
    <h1>解决方案 | &nbsp; <span style="font-size:15px">PRODUCT</span></h1>
    <h3>我们有窗户和门的形状和风格，可用于组合，以改善美丽，舒适和能源效率的家 </h3>
    <div class="solutions">
      <div class="solution" v-for="item in solutions" :key="item.title">
        <div>
          <img :src="require('@/images/' + item.image)" alt="404">
        </div>

        <div class="info">
          <h2>{{ item.title }}</h2>
          <p>
            我们不断致力于为全球建筑提供全套节能创新型门窗解决方案。不仅帮助美化建筑物的外形设计，也助力于建筑物的高效和节能，使门窗与建筑更加自然、和谐。
          </p>
          <button @click="showMore()">MORE →</button>
        </div>
      </div>
    </div>

    <div v-if="moreInfo">
      <p>{{ moreInfo }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      solutions: [
        {title: '私家别墅', image: 'p1.png'},
        {title: '商业办公', image: 'p2.png'},
        {title: '高档酒店', image: 'p3.png'},
      ],
      moreInfo: ''
    }
  },
  methods: {
    showMore(solution) {
      this.moreInfo = `了解更多关于 ${solution.title} 的信息。`;
    }
  }
}
</script>

<style scoped lang="less">
.home {
  text-align: left;
  padding: 20px;

  h1 {
    font-family: '微软雅黑', sans-serif;
    font-size: 20px;
    font-weight: 350;
  }

  h3 {
    font-size: 13px;
    font-weight: 300;
  }
}

.solution {
  display: flex;
  flex-direction: row;
  margin: 30px 0;
  background-color: #F5F5F5;

  h2 {
    font-size: 20px;
    font-weight: 400;
  }

  .info {
    margin-left: 50px;
    margin-top: 20px;

    p {
      color: #8E8E8E;
      font-size: 24px;
    }

    button {
      width: 90px;
      height: 30px;
      margin-left: 88%;
      margin-top: 30px;
    }
  }
}

button {
  border: none;
  color: #737373;

  &:hover {
    color: #8E9A4B;
  }
}
</style>
